<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>数据</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="js/jedate/skin/jedate.css" />
		<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			.data_img {
				text-align: center;
				color: #fff;
				/*font-weight: bold;*/
				font-size: 14px;
			}
			
			.d_i_div {
				widows: 90%;
				margin: 0 auto;
			}
			
			.data_img .d_i_div .data_img_i {
				background: url(images/numbers-style2-big.png) no-repeat center center;
				width: 20%;
				height: 24px;
				display: inline-block;
				margin: 12% 0 6% 0;
				background-size: cover;
			}
			
			.data_img .d_i_div p {
				padding-bottom: 5%;
			}
			
			.data_img .d_i_div .d_img_touzi {
				background: url(images/numbers-style1-big.png) no-repeat center center;
				background-size: cover;
				width: 18%;
			}
			
			.d_touzi {
				background: #f34060;
			}
			
			.d_yuanyou {
				background: #3dcaa4;
			}
			
			.d_rongzi {
				background: #f13b5a;
			}
			
			.d_zong {
				background: #d652d9;
			}
			
			.countrys_style {
				background: #0833A0;
				sursor: pointer;
				margin: 2px;
				color: #fff;
			}
			.lists{margin-right: 10px;}
			#indicator,#countrys{width: 100%;position: absolute;left: 0;top: 0;}
			.countrys_list,
			.zb_list {
				width: 100%;background: #fff;height: 500px;overflow: auto;
				position: absolute;
				right: 0;
				width: 100%;
				z-index: 10;
				background: #FFFFFF;
				word-wrap: break-word;
				word-break: break-all;
			}
			.new_txt,.new_img,#show_data{position: relative;}
			.new_close{position: absolute;top: 0;right: 0;}
			#countrys_vals,#indicators_vals{position: relative;margin: 5px;}
			
			
			::-moz-placeholder { color: #fff !important; }
			::-webkit-input-placeholder { color:#fff !important;; }
			:-ms-input-placeholder { color:#fff !important;; }
			input.form_style{padding: 8.6px 10px !important;;}
			
			
		</style>
	</head>

	<body>
		<!-- 头部导航 -->
		<header></header>
		
		<!-- 头部导航结束  -->

		<div id="wx_phone">
			<!-- 手机号登陆  -->
			<div id="phone">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">手机登录</p>
							<form role="form">
								<div class="form-group fg">
									<a class="btn btn-info btn-sm btn-block none" id="phone_error">手机格式不正确！重新输入</a>
									<input type="text" class="form-control" id="input_Phone" placeholder="请输入手机号">
									<!--<input type="password" class="form-control" id="input_password" placeholder="请输入密码">-->
									
									<input type="text" class="form-control form-group-sm " id="input_Phone_code" placeholder="请输入验证码">
									<a class="btn btn-info btn-sm btn-block none" id="code_btn1"><span id="code_num"><i>60</i>后可重新</span>获取验证码</a>
									<input type="button" class="btn btn-primary btn-sm btn-block " id="code_btn"  data-placement="bottom" value="获取验证码" />
								</div>
								<!--<input type="button" class="btn modal_style_btn btn_next fg" value="下一步">-->
								<input type="button" class="btn btn-success btn-block modal_style_btn btn_login phone_code_login" value="登录">
								<p id="wechat_tag">
									<!--<a href="javascript:void(0)" data-toggle="modal" data-target="#PhoneCode" class="phone_code">手机验证码登录<span class="glyphicon glyphicon-play"></span></a>-->
									<a href="javascript:void(0)" data-toggle="modal" data-target="#Phone" class="phone_no fg_hide">手机号登录<span class="glyphicon glyphicon-play"></span></a>
									<a href="javascript:void(0)" data-toggle="modal" data-target="#WeChat" id="aaa" class="">微信登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- 微信登陆  -->
			<div id="WeChat">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">扫码登录</p>
							<form role="form">
								<div class="form-group" id="wx">
									<img src="images/erweima.png" alt="微信扫码" />
								</div>
								<p id="wechat_tag">
									<a href="javascript:void(0)" data-target="#Phone" class="">手机登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 数据内容 -->
		<div class="container" id="datas">
			<div class="row" style="margin-right: 0;">
				<div class="col-md-2 data_img">
					<!--<img src="images/touzi.png" alt="投资" />-->
					<div class="d_i_div d_touzi">
						<i class="data_img_i d_img_touzi" style=""></i>
						<p>投资增速</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_yuanyou">
						<i class="data_img_i d_img_yuanyou" style=""></i>
						<p>原油期货</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_rongzi">
						<i class="data_img_i d_img_rongzi" style=""></i>
						<p>融资规模</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_zong">
						<i class="data_img_i d_img_zong" style=""></i>
						<p>运输总量</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_touzi">
						<i class="data_img_i d_img_touzi" style=""></i>
						<p>投资增速</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_yuanyou">
						<i class="data_img_i d_img_yuanyou" style=""></i>
						<p>原油期货</p>
					</div>
				</div>
			</div>
			<div class="row" id="data_border">
				<div class="db data_border">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db " style="margin-right: 0;">
					<div></div>
				</div>
			</div>
		</div>

		<div class="container" id="data_desc">
			<div class="row">
				<p>数据显示设置:</p>
				<!--<select class="form_indicator form_style col-md-3" id="indicator">
					<option>GDP</option>
				</select>
				<input type="text" id="year" hidden="hidden">
				<select class="form_country form_style col-md-3" id="countrys">
					<option>国家</option>
				</select>-->
				<div class="lists col-md-3">
					<input class="form_style" id="indicator" placeholder="经济指标">
					<div class="zb_list none" style="border: 1px solid rgb(153, 153, 153); padding: 2px 10px;">
						<!--<div class="zb_ls countrys_style" data-id="2331">Y-3（三里屯店）</div>
				    	<div class="zb_ls" data-id="2332">3.1 Phillip Lim（三里屯店）</div>
				    	<div class="zb_ls" data-id="19554">3CE</div>
				    	<div class="zb_ls" data-id="19557">3TEMPO</div>-->
					</div>
				</div>
				<div class="lists col-md-3">
					<input class="form_style" id="countrys" placeholder="国家">
					<div class="countrys_list none" style="border: 1px solid rgb(153, 153, 153); padding: 2px 10px;">
						<!--<div class="countrys_ls countrys_style" data-id="2331">Y-3（三里屯店）</div>
				    	<div class="countrys_ls" data-id="2332">3.1 Phillip Lim（三里屯店）</div>
				    	<div class="countrys_ls" data-id="19554">3CE</div>
				    	<div class="countrys_ls" data-id="19557">3TEMPO</div>-->
					</div>
				</div>
				<div class="lists col-md-2">
					<select class="form_style" id="start_year">
						<option>开始年份</option>
						
					</select>
				</div>
				<div class="lists col-md-2">
					<select class="form_style" id="end_year">
						<option>结束年份</option>
						
					</select>
				</div>
				<i style="background: url(images/more-info@2x.png);display: inline-block;width: 40px;height: 40px;float: right;background-size: cover;"></i>
				<div class="clearfix"></div>
			</div>
			<div id="">
				已选国家：<p id="countrys_vals"></p>
				已选指标：<p id="indicators_vals"></p>
			</div>
			<div id="echarts_main" style="min-height: 500px;margin: 50px 0;"></div>
			<small style="color: #999999;">来源： <span class="source"> 经济日报  </span></small>
		</div>
		<footer><div id="footer_" class="container">
	版权©&nbsp;2017&nbsp;
	<p id="back_top">∧</p>
</div></footer>
		<script src="js/jquery1.9.1.min.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!--日期控件引入-->
		<script type="text/javascript" src="js/jedate/jquery.jedate.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
			$("header").load("header.html");
			$("footer").load("footer.html");
			$(function() {
				setTimeout(function(){
					console.log($("#navs li").length)
					$("#navs li").eq(2).addClass("active").siblings().removeClass("active");
				},500);
				//接口
				var _href = "http://api.jjrb.grsx.cc",
					interfacelist = {
						select_indicator: "/data/indicator/k/", //查询indicator
						select_data: "/data", //查询数据   ?country=CN,US&indicator=NY.GDP.MKTP.CD&start=1990
						host_indicator: "/data/indicator/hot", //热门
						select_country: "/data/country/k/",//查询国家/data/country/k/{val}
						wx: "/login/wx"//微信登录post expire_in=&open_id=&	token=&refresh_token=	
					},countrys=[],indicators=[],_vals=[];
				
/*				//时间
				$(document).on("click",".form_year",function(){
					$("#year").click();
					if ($("#year").val()) {
						$(this).append("<option selected='selected'>"+$("#year").val()+"</option>");
					}
				});
				$("#year").jeDate({//时间插件调用
					isinitVal: false,
					festival: true,
					ishmsVal: false,
					format: "YYYY",
					zIndex: 3000,
				})*/
				var year = "";
				$(".form_year").change(function(){
					year = $(this).val();
					console.log(year);
				});
				
				var u = getUrlParams(),
				country = u.country,
			    indicator = u.indicator,
			    start = u.start,
			    end = u.end;
			    var _url = _href + interfacelist.select_data+"?";//'data.json';//
			    urlLoad("echarts_main",_url,u.country,u.indicator,u.start,u.end);
			    if (country) {
			    	urlLoad("echarts_main",_url,country,indicator,start,end);
			    }else{
			    	$(document).on("change",".form_country",function(){
			    		var country = $(this).val();
			    		console.log(country);
			    		urlLoad("echarts_main",_url,country,indicator,start,end);
			    	});
			    	
			    }
				//可搜索国家，经济指标
				$(".countrys_list,.zb_list").css("top",$("#countrys").outerHeight()+"px");
				//国家输入内容键盘弹起事件
				$("#countrys,#indicator").on("keyup", function() {
					var country_val = $("#countrys").val();
					var indicator_val = $("#indicator").val();
					var _src = "";//'data.json'; //
					console.log(_src);
					var _idname = $(this).attr("id");
					if(_idname.indexOf("country") >= 0) {
						console.log("cc");
						_src = _href + interfacelist.select_country + country_val;
						ci(".countrys_list", 'countrys_ls', _src);
					} else if(_idname.indexOf("indicator") >= 0) {
						console.log("dd");
						_src = _href + interfacelist.select_indicator + indicator_val;
						ci(".zb_list", 'zb_ls', _src);
					}
				});
				//国家，经济指标通用方法
				function ci(classname, classname1, src) {
					$(classname).show();
					$(classname).html("");
					$.ajax({
						type: "get",
						url: src,
						success: function(data) {
							var d = data;
							console.log(d);
							$(d).each(function(i, e) {
//								console.log(e);
								var _name,_id;
								if (classname.indexOf("country")>=0) {
									_id = e.iso2_code;
									_name = e.name;
									$(classname).append('<div class="' + classname1 + ' cou_list_id" data-id="'+_id+'" data-name="'+_name+'" title="'+_name+'">' + _name + '</div>');
								} else if(classname.indexOf("zb")>=0){
									_id = e.id;
									_name = e.name_cn;
									if(_name==null)_name=_id
									$(classname).append('<div class="' + classname1 + ' zb_list_id" data-id="'+_id+'" data-name="'+_name+'" title="'+_id+'">' + _name + '</div>');
								}
								
							});
						},
						error: function(data) {
							console.log(data.error().status);
						}
					});
				}

				//点击弹出层国家列表隐藏
				$("body").on("click", function(e) {
					
					$(".countrys_list,.zb_list").hide();
				});
				//阻止输入框点击默认事件
				$(".desc_position").on("click", function(e) {
					e.stopPropagation();
				});
				//鼠标移到列表上样式
				$('.countrys_list,.zb_list').on('mouseenter', 'div.countrys_ls,div.zb_ls', function() {
					$(this).addClass("countrys_style").siblings().removeClass("countrys_style");
				});
				//列表点击事件
				$('.countrys_list,.zb_list').on('click', 'div.countrys_ls,div.zb_ls', function(e) {
					e.stopPropagation();
					if(countrys.length>0||indicators.length>0){
						countrys=[];
						indicators=[];
						_vals=[];
					}
					var _classname = $(this).attr("class"),_id=$(this).attr("data-id"),_name=$(this).attr("data-name");
					var txt = $(this).html();
					console.log(_classname)
					if(_classname.indexOf("countrys_ls") >= 0) {
						console.log("country_ls");
						$("#countrys").val(txt);
						$('.countrys_list').hide();
						var c_html = "<div style='display:inline-block;'><p data-id='"+_id+"' class='countrys_txt' data-name='"+_name+"' style='margin:0 3px;padding:1px 15px;border:1px solid #666;position:relative;'>"+$("#countrys").val()+"<span class='glyphicon glyphicon-remove country_txt_close none'></span></p></div>";
						$("#countrys_vals").append(c_html);
						for(var i=0;i<$(".countrys_txt").length;i++){
							countrys.push($(".countrys_txt").eq(i).attr("data-id"));
							_vals.push($(".indicators_txt").eq(i).attr("data-name"));
						}
						country = countrys.toString();
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					} else if(_classname.indexOf("zb_ls") >= 0) {
						console.log("zb_ls");
						$("#indicator").val(txt);
						$('.zb_list').hide();
						var i_html = "<div style='display:inline-block;'><p data-id='"+_id+"' class='indicators_txt' data-name='"+_name+"' style='margin:0 3px;padding:1px 15px;border:1px solid #666;position:relative;'>"+ $("#indicator").val()+ "<span class='glyphicon glyphicon-remove country_txt_close none'></span></p></div>";
						$("#indicators_vals").append(i_html);
						for(var i=0;i<$(".indicators_txt").length;i++){
							indicators.push($(".indicators_txt").eq(i).attr("data-id"));
							_vals.push($(".indicators_txt").eq(i).attr("data-name"));
						}
						indicator = indicators.toString();
						console.log(indicator);
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					}
				});
				
				
				$(document).on("mouseenter",".countrys_txt,.indicators_txt",function(){
					$(this).find(".country_txt_close").show().css({"position":"absolute","right":0,"top":0});
				});
				$(document).on("mouseleave",".countrys_txt,.indicators_txt",function(){
					$(".country_txt_close").hide();
				});
				//删除已选标签
				$(document).on("click",".country_txt_close",function(){
					$(this).parent().parent().remove();
					countrys=[];indicators=[],_vals=[];
					console.log($("#countrys_vals").length);
					if ($("#countrys_vals").length>0) {
						console.log("已删除");
						for(var i=0;i<$(".countrys_txt").length;i++){
							countrys.push($(".countrys_txt").eq(i).attr("data-id"));
							_vals.push($(".indicators_txt").eq(i).attr("data-name"));
						}
//						console.log(countrys)
						country = countrys.toString();
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					} else{
						urlLoad("echarts_main",_url,null,indicator,start,end,_vals);
					}
					if($("#indicators_vals").length>0){
						_vals=[];
						for(var i=0;i<$(".indicators_txt").length;i++){
							indicators.push($(".indicators_txt").eq(i).attr("data-id"));
							_vals.push($(".indicators_txt").eq(i).attr("data-name"));
						}
						indicator = indicators.toString();
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					}else{
						urlLoad("echarts_main",_url,country,null,start,end,_vals);
					}
				});
				
				
				var endyear = new Date().getFullYear(),yearhtml;
				for(var i=100;i>0;i--){
					yearhtml+="<option value='"+endyear+"'>"+endyear+"年</option>";
					endyear--;
				}
				$("#start_year,#end_year").append(yearhtml);
				
				//年份触发事件
				$(document).on("change","#start_year,#end_year",function(){
					if ($(this).attr("id")=="start_year") {
						start = $(this).val();
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					}
					if ($(this).attr("id")=="end_year") {
						end = $(this).val();
						urlLoad("echarts_main",_url,country,indicator,start,end,_vals);
					}
					
				});
			});
			
		</script>
	</body>

</html>